<template>
  <h1 class="m-v-30">组建基础</h1>
  <h3 class="m-v-10">定义一个组建</h3>

  <Count title="COUNT改变"
    @changeTotal='changeTotal'>
    10
  </Count>

  <div style="width:500px;height:0;border:1px solid red;"
    class="m-v-10"></div>
  <Num title='num改变'
    @changeTotal='changeTotal'>
    20
  </Num>

  <div>子组建中改变父组建中也改变Total:{{total}}</div>
</template>

<script setup lang="ts">
import Count from '@/components/count.vue'
import Num from '@/components/num'
import { ref } from '@vue/reactivity'

let total = ref(0)

const changeTotal = (data) => {
  console.log(data);

  total.value += data
}

</script>

<style scoped>
</style>